<template>
  <div class="wrapper" v-if="showSwiper">
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item in list" :key="item.id">
      <img class="swiper-img" :src='item.imgUrl' alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>
<script type="text/ecmascript-6">

export default{
  name:'HomeSwiper',
  data() {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop:true,
        autoplay: 3000,
//        是否触摸过以后就不轮播了
        autoplayDisableOnInteraction:false
      }
    }
  },
  computed: {
    showSwiper: function(){
      return this.list.length
    }
  },
  props:['list']
}
</script>
<!--.wrapper>>>表示穿透这样样式的scoped就不会去限制了-->
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet
  background-color: #fff !important;
.wrapper
  width:100%;
  height:0;
  overflow: hidden;
  padding-bottom: 31.75%;

.swiper-img
   width:100%;
</style>
